<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="div1" class="box" title="one">class为box的div1</div>
    <div id="div2" class="box" title="two">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br />
    <ul>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>

    <input type="text" name="username" value="hello world" />
    <br>
    <input type="checkbox">
    <input type="checkbox">
    <br>
    <button>选中</button>
    <button>不选中</button>


    <script src="../js/jquery-1.10.1.min.js"></script>
    <script>
        //  需求:
        //  1. 读取第一个div的title属性
        // console.log($("div:first").attr("title"))
        //  2. 给所有的div设置name属性(value为hello world)
        // $("div").attr("name", "hello world")
        //  3. 移除所有div的title属性
        // $("div").removeAttr("title")
        //  4. 给所有的div设置class='hahaClass'
        // $("div").attr("class", "hahaClass")
        //  5. 给所有的div添加class='abc'
        // $("div").addClass("abc")
        //  6. 移除所有div的hahaClass的class
        // $("div").removeClass("hahaClass")
        //  7. 得到最后一个li的标签体文本
        // console.log($("li:last").html())
        // console.log($("li:last").text())
        //  8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
        // $("li:first").html("<h1>mmmmmmmmm</h1>")
        //  9. 得到输入框中的value值
        // console.log($(":text").val())
        //  10. 将输入框的值设置为你好世界
        // $(":text").val("你好世界")
        //  11. 点击'全选'按钮实现全选
        // $("button:first").click(function() {
        //         $("[type=checkbox]").prop("checked", true)
        //     })
        //  12. 点击'全不选'按钮实现全不选
        // $("button:last").click(function() {
        //         $("[type=checkbox]").prop("checked", false)
        //     })
        //具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
    </script>
</body>

</html>